<template>
	<view class="ov">
		<view class="pt20 pd " v-if="xzsdfd.length>0">
			<scroll-view scroll-x="true" class="sdfdtyser">
				<image :src="'../../static/img/'+sd.touxiang" class="yj jjhnxeert" v-for="sd in xzsdfd"></image>
			</scroll-view>
		</view>
		<view class="mt70 pd">
			<view class="pr">
				<input type="text" value="" placeholder="请输入好友名称或账号搜索" class="kjjnmxeer" />
				<icon type="search" size="20" class="kkjdeeet" color="#999" />
			</view>
		</view>
		<view class="pr kjhjdeert" :style="{height:hhgbsd+'px'}">
			<scroll-view scroll-y="true" class="h100 " :scroll-into-view="jhbnsd">
				<view class="pd" v-for="(sd,idx) in list" :key="idx" :id="sd.letter">
					<view class="cf fz32">
						{{sd.letter}}
					</view>
					<view class="row sderttr pt20 pm20" v-for="(sf,idx) in sd.data" @tap="jjhssdf(sf)" :key="idx">
						<view class="">
							<image src="../../static/img/xuanhsd.png" class="kjjsee cz ab" v-if="sf.cls"></image>
							<text class="kjjsee cz f_b" v-else></text>
						</view>
						<view class="ml30">
							<image :src="'../../static/img/'+sf.touxiang" class="yj useertty cz"></image>
						</view>
						<view class="cf fz32 pl20">
							{{sf.name}}
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="kjnxeerty">
				<view class="drttsewert" v-for="(sd,idx) in list" :key="idx" @tap="kkjnxert(sd.letter)">
					<text class="cf" v-if="jhbnsd==sd.letter">{{sd.letter}}</text>
					<text class="z9" v-else>{{sd.letter}}</text>
				</view>
			</view>

		</view>
		
		<view class="kkjnnjnxert" v-if="isjhjhd">
			<view class="kjnmmknxderet">
				<view class="fz32 z3">
					将鲁A·99999的位置分别分享给
					<view class="kjnkkjsdf mt20">
						<image src="../../static/img/usericon.png" class="yj jjhnxeert" mode="widthFix" v-for="sd in 4"></image>
						
					</view>
					<view class="row cen fz32">
						<view class="col z9" @tap="hidex">
							取消
						</view>
						<view class="col ls"  @tap="hidex">
							确定
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import airport from '@/common/airport.js'
	export default {
		data() {
			return {
				isjhjhd:false,
				list: airport.list,
				jhbnsd: 'A',
				hhgbsd: 0,
				xzsdfd: []
			}
		},
		components: {

		},
		onNavigationBarButtonTap() {
			this.isjhjhd = true
		},
		onLoad() {
			let hggsde = uni.getSystemInfoSync().windowHeight
			this.hhgbsd = hggsde - 110
		},
		methods: {
			hidex(){
				this.isjhjhd =false
			},
			jjhssdf(sf) {
				if (sf.cls) {
					sf.cls = ''
				} else {
					sf.cls = "act"
				}
				this.xzsdfd= []
				this.list.map(a=>{
					a.data.map(b=>{
						if(b.cls){
							this.xzsdfd.push(b)
						}
					})
				})
				if(this.xzsdfd.length>0){
					this.hhgbsd =  uni.getSystemInfoSync().windowHeight - 180
				}else{
					this.hhgbsd =  uni.getSystemInfoSync().windowHeight - 110
				}
				
			},
			kkjnxert(e) {
				this.jhbnsd = e
			}
		},
		mounted() {}
	}
</script>
<style scoped>
	.kkjnnjnxert{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.5);
		z-index: 1000;
	}
	.kjnmmknxderet{
		width:600upx;
		height:500upx;
		background:rgba(255,255,255,1);
		opacity:1;
		border-radius:6px;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		padding: 20px;
	}
	.kjnkkjsdf{
		min-height: 300upx;
	}
	.kjnkkjsdf{
		margin-left: -20upx;
		margin-right: -20upx;
	}
</style>
